<template>
  <SearchForm
    v-model:search-items="searchItems"
    :form-config="formConfig"
    :cache-key="_props.cacheKey"
    @search="handleSearch"
  />
</template>

<script setup>
import { ref } from "vue";
import SearchForm from "@/components/CommonSearch/SearchForm.vue";

const emit = defineEmits(["search"]);

// 定义接收的props
const _props = defineProps({
  cacheKey: {
    type: String,
    required: true,
  },
});
// 定义搜索项配置
const searchItems = ref([
  {
    label: "用户账号",
    prop: "username",
    component: "el-input",
    visible: true,
    span: { lg: 6, md: 12, sm: 12, xs: 24 },
    props: {
      clearable: true,
      placeholder: "请输入用户账号",
    },
  },
  {
    label: "用户名",
    prop: "nickname",
    component: "el-input",
    visible: true,
    span: { lg: 6, md: 12, sm: 12, xs: 24 },
    props: {
      clearable: true,
      placeholder: "请输入用户名",
    },
  },
  {
    label: "性别",
    prop: "sex",
    component: "DictData",
    visible: true,
    span: { lg: 6, md: 12, sm: 12, xs: 24 },
    props: {
      code: "sex",
      placeholder: "请选择性别",
    },
  },
]);

/** 表单配置 */
const formConfig = ref({
  username: "",
  nickname: "",
  sex: void 0,
});

/** 处理搜索 */
const handleSearch = (formData) => {
  emit("search", { ...formData });
};

defineExpose({ resetFields: () => {} });
</script>
